<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
<!--              <el-col :span="10">-->
<!--                <el-form-item label="用工单号" prop="taskNumber">-->
<!--                  <el-input v-model="form.taskNumber" placeholder="请输入用工单号" maxlength="30" />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
              <el-col :span="6">
                <el-form-item label="用工时间" prop="needTime">
                  <el-date-picker
                    v-model="form.needTime"
                    size="mini"
                    style="width: 200px"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <template v-for="item in operationNeedList">
                  <h5>班次 {{item.timeShiftName}}</h5>
                  <PostTable :tableData="item.sysPostNames" :disabled="false"></PostTable>
                </template>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18"  style="margin-top: 10px;">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
  </div>
</template>

<script>
  import { addShowOperationNeed , addOperationNeed } from "@/api/job/operationNeed/operationNeed";
  import { PostTable } from "../components"
  export default {
    components:{ PostTable },
    name: "attendanceGroup",
    created() {
      this.addShowOperationNeed();
    },
    data() {
      return {
        // 表格数据
        operationNeedList: [],
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        menuExpand: false,
        menuNodeAll: false,
        deptExpand: true,
        deptNodeAll: false,
        // 日期范围
        dateRange: [],
        signUp:false,
        timeShiftList:[],
        postNameList:[],
        // 表单参数
        form: {
          taskNumber:undefined,
          needTime:undefined,
          remark:undefined,
          operationNeedList:undefined
        },
        defaultProps: {
          children: "children",
          label: "label",
        },

        // 表单校验
        rules: {
          // taskNumber: [
          //   { required: true, message: "用工单号不能为空", trigger: "blur" },
          // ],
          needTime: [
            { required: true, message: "用工时间不能为空", trigger: "blur" }
          ]
        }
      };
    },

    methods: {
      addShowOperationNeed(){
        addShowOperationNeed().then(es=>{
          this.operationNeedList = es.data
        })
      },

      submitForm(){
        this.operationNeedList.forEach(function(item, index) {
          item.sysPostNames.forEach(function(v,index) {
            if ('' == String(v.manNumber)){
              alert("数据有空值");
              throw "";
            }
            if ('' == String(v.womanNumber)){
              alert("数据有空值");
              throw "";
            }
            if (Number(v.manNumber) < 0){
              alert("数据有负数");
              throw "";
            }
            if (Number(v.womanNumber) < 0){
              alert("数据有负数");
              throw "";
            }
            if (String(v.manNumber).indexOf('.') != -1) {
              alert("数据有小数");
              throw "";
            }
            if (String(v.womanNumber).indexOf('.') != -1) {
              alert("数据有小数");
              throw "";
            }
          })
        })
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.operationNeedList = this.operationNeedList
            addOperationNeed(this.form).then(es=>{
              this.msgSuccess(es.msg);
              this.open = false;
            })
          }
        });
      },
    }
  };
</script>
